* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 屏幕宽高 */
  --view-width: 375px;
  --view-height: 667px;
  /* 单个障碍物口子大小 */
  --obstacle-gap: 50px;
  /* 障碍物宽度  */
  --obstacle-width: 48px;
  /* 背景动画时间  */
  --animation-background-time: 5s;
}

html,
body {
  min-width: var(--view-width);
  min-height: var(--view-height);
  max-width: var(--view-width);
  max-height: var(--view-height);
  margin: 0;
  overflow: hidden;
  border: 1px solid #000;
}

/* 标题 */
#title-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 背景 */
#background-box {
  width: var(--view-width);
  height: var(--view-height);
  overflow: hidden;
  position: absolute;
  z-index: -1;

  &>#background {
    display: flex;
    animation: moveBackground var(--animation-background-time) linear infinite;
    will-change: transform;
    backface-visibility: hidden;

    &>img {
      width: var(--view-width);
      height: var(--view-height);
    }
  }
}

@keyframes moveBackground {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* 鸟 */
#bird-box {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 17px;
  left: 17px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;

  &>#bird-container {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;

    &>#bird {
      transform: scale(2);
      animation: moveBird 1s linear infinite reverse;
      animation-timing-function: steps(1, end);
    }
  }

}

@keyframes moveBird {

  0% {
    transform: translateY(0);
  }

  33.33% {
    transform: translateY(-48px);
  }

  66.66% {
    transform: translateY(-96px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* 障碍物 */
#obstacle-box {
  width: var(--view-width);
  height: var(--view-height);
  overflow: hidden;
  position: absolute;

  &>.obstacle {
    max-width: fit-content;
    max-height: fit-content;
    display: flex;
    flex-direction: column;
    gap: var(--obstacle-gap);
    transform: translate(var(--view-width), 0);
    position: absolute;
    z-index: 3;
    /* animation: moveObstacle var(--animation-obstacle-time) linear infinite; */

    &>img {
      width: var(--obstacle-width);
    }
  }
}

@keyframes moveObstacle {
  to {
    transform: translate(-100vw, 0);
  }
}